<!--  -->
<template>
  <div>
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >签到管理</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'signlist' }"
            >手机号白名单列表</el-breadcrumb-item
          >
        </el-breadcrumb>
      </el-col>
      <!-- <el-input
        style="width: 440px"
        @clear="search"
        size="large"
        clearable
        v-model="searchForm.keywords"
        placeholder="请输入搜索词"
      >
        <template #append>
          <el-button icon="Search" @click="search" />
        </template>
      </el-input> -->
      <el-button type="primary" class="adds" @click="add" size="small"
        >新增</el-button
      >
      <el-table
        :data="dialogarr"
        border
        style="width: 100%; margin-top: 20px"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="name" min-width="100" label="姓名" />
        <el-table-column prop="phone" label="手机号" min-width="100">
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" min-width="100">
        </el-table-column>
        <el-table-column
          label="操作"
          width="100"
          fixed="right"
          v-if="dialogarr.length != 0"
        >
          <template #default="scope">
            <el-button type="danger" size="small" @click="deleter(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div class="exam_from_btn_box">
      <el-button type="danger" size="mini" @click="backBtn()">返回</el-button>
    </div>
    <el-dialog
      width="50%"
      :center="true"
      :visible.sync="dialogFormVisible"
      title="新增"
      :closed="cancelBtn"
    >
      <el-form :v-model="dialogForm" ref="ruleFormRef">
        <el-form-item label="姓名:" prop="title" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.name" autocomplete="off" type="text" />
        </el-form-item>
        <el-form-item label="手机号" prop="title" :label-width="formLabelWidth">
          <el-input
            v-model="dialogForm.phone"
            autocomplete="off"
            oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
            @blur="salaryChange"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelBtn()">取消</el-button>
          <!-- 新增 -->
          <el-button type="primary" @click="confirmBtn()"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dialogarr: [],
      searchForm: {
        page: 1,
        perPage: 10,
        keywords: "",
        event_signin_id: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "100px",
      dialogForm: {
        id: "",
        name: "",
        phone: "",
      },
    };
  },
  mounted() {
    this.whitecalllist();
  },
  methods: {
    whitecalllist() {
      let url = "/admin/signin/whitePhoneList";
      let data = {
        page: this.searchForm.page,
        perPage: this.searchForm.perPage,
        keywords: this.searchForm.keywords,
        event_signin_id: this.$route.query.id,
      };
      this.axios.post(url, data).then((res) => {
        if (res.code == 0) {
          this.dialogarr = res.list;
          console.log(this.dialogarr, "this.dialogar");
        }
      });
    },
    salaryChange(e) {
      this.dialogForm.phone = e.target.value;
    },
    // 返回上一页
    backBtn() {
      this.$router.replace({
        name: "signlist",
      });
    },
    //新增手机号白名单
    add() {
      this.dialogFormVisible = true;
    },
    cancelBtn() {
      this.dialogFormVisible = false;
    },
    confirmBtn() {
      if (this.dialogForm.name == "") {
        this.$message.error("请输入姓名");
        return false;
      }
      if (this.dialogForm.phone == "") {
        this.$message.error("请输入手机号");
        return false;
      }
      let telText =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/;
      if (!telText.test(this.dialogForm.phone)) {
        this.$message.error("手机号格式不正确");
        return false;
      }
      let url = "/admin/signin/addWhitePhone";
      let data = {
        event_signin_id: this.$route.query.id,
        name: this.dialogForm.name,
        phone: this.dialogForm.phone,
      };
      this.axios.post(url, data).then((res) => {
        if (res.code == 0) {
          this.dialogFormVisible = false;
          this.whitecalllist();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    deleter(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "/admin/signin/delWhitePhone";
        let data = {
          id: id,
        };

        this.axios
          .post(url, data)
          .then((res) => {
            if (res.code == 0) {
              this.whitecalllist();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },
  },
};
</script>

<style scoped>
.exam_from_btn_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 0;
  border-top: 1px solid #dddddd;
  background-color: #fff;
}
</style>